<template>
  <div class="home">
    <div class="content">
      <!-- 图片轮播 -->
      <div class="carousel">
        <el-carousel :interval="3000" arrow="always" height="580px">
          <el-carousel-item
            v-for="(item, index) in carouselPicture"
            :key="index"
          >
            <img
              :src="item.url"
              :alt="item.title"
              style="height: 580px"
              @click="toDetail(item)"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 热门电影 -->
      <div class="movieList">
        <p style="font-size: 28px; font-weight: bold">热门电影</p>
        <div class="movie" v-for="(item, index) in movieList" :key="index">
          <div class="movie_up" @click="toDetail(item)">
            <img :src="item.cover" :alt="item.name" />
            <div class="movie_name">&nbsp;&nbsp;{{ item.name }}</div>
          </div>
          <div class="wants">&nbsp;&nbsp;{{ item.hot }}人想看</div>
          <div class="playTime">{{ item.releaseTime }}上映</div>
        </div>
      </div>
      <!-- 热门Top10 -->
      <div class="top10">
        <p style="color: orange; font-size: 28px">热门榜单Top10</p>
        <ul>
          <li v-for="(item, index) in topList" :key="index">
            <!-- Top1 -->
            <div class="first" v-if="index == 0" @click="toDetail(item)">
              <img :src="item.cover" :alt="item.name" @click="toDetail(item)" />
              <p class="name">{{ item.name }}</p>
              <p class="playTime">上映时间：{{ item.releaseTime }}</p>
              <p class="hot">热度值：{{ item.hot }}</p>
            </div>
            <!-- Top2 -->
            <div class="second" v-if="index == 1" @click="toDetail(item)">
              <img :src="item.cover" :alt="item.name" @click="toDetail(item)" />
              <p class="name">{{ item.name }}</p>
              <p class="hot">热度值：{{ item.hot }}</p>
            </div>
            <!-- Top3 -->
            <div class="tired" v-if="index == 2">
              <img :src="item.cover" :alt="item.name" @click="toDetail(item)" />
              <p class="name">{{ item.name }}</p>
              <p class="hot">热度值：{{ item.hot }}</p>
            </div>
            <!-- Top4-10 -->
            <div class="other" v-if="index > 2" @click="toDetail(item)">
              <span class="num">{{ index + 1 }}</span>
              <span class="name">{{ topList[index].name }}</span>
              <span class="hot">热度值：{{ topList[index].hot }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { Carousel, MovieList, TopMovieList } from "@/api/movie";
export default {
  data() {
    return {
      search_movie: "",
      carouselPicture: [
        // {
        //   name: "狮子王",
        //   imgAddress: require("@/assets/movie/carousel/狮子王.png"),
        // },
        // {
        //   name: "受益人",
        //   imgAddress: require("@/assets/movie/carousel/受益人.png"),
        // },
        // {
        //   name: "小小的愿望",
        //   imgAddress: require("@/assets/movie/carousel/小小的愿望.png"),
        // },
        // {
        //   name: "海兽之子",
        //   imgAddress: require("@/assets/movie/carousel/海兽之子.jpg"),
        // },
        // {
        //   name: "孔子",
        //   imgAddress: require("@/assets/movie/carousel/孔子.jpg"),
        // },
        // {
        //   name: "长津湖",
        //   imgAddress: require("@/assets/movie/carousel/长津湖.jpg"),
        // },
      ],
      movieList: [
        // {
        //   name: "刺杀小说家",
        //   imgAddress: require("@/assets/movie/list/刺杀小说家.jpg"),
        //   wants: 123,
        //   playtime: "2021 - 03 - 05",
        //   hot: 130,
        // },
        // {
        //   name: "21座桥",
        //   imgAddress: require("@/assets/movie/list/21座桥.jpg"),
        //   wants: 323,
        //   playtime: "2021 - 06 - 15",
        //   hot: 120,
        // },
        // {
        //   name: "人潮汹涌",
        //   imgAddress: require("@/assets/movie/list/人潮汹涌.jpg"),
        //   wants: 1023,
        //   playtime: "2021 - 12 - 25",
        //   hot: 999,
        // },
        // {
        //   name: "你好李焕英",
        //   imgAddress: require("@/assets/movie/list/你好李焕英.jpg"),
        //   wants: 1323,
        //   playtime: "2021 - 07 - 03",
        //   hot: 666,
        // },
        // {
        //   name: "狮子王",
        //   imgAddress: require("@/assets/movie/list/狮子王.jpg"),
        //   wants: 1233,
        //   playtime: "2021 - 08 - 16",
        //   hot: 233,
        // },
        // {
        //   name: "唐人街探案",
        //   imgAddress: require("@/assets/movie/list/唐人街探案.jpg"),
        //   wants: 3123,
        //   playtime: "2021 - 04 - 30",
        //   hot: 886,
        // },
        // {
        //   name: "小小的愿望",
        //   imgAddress: require("@/assets/movie/list/小小的愿望.jpg"),
        //   wants: 1223,
        //   playtime: "2021 - 01 - 28",
        //   hot: 189,
        // },
        // {
        //   name: "受益人",
        //   imgAddress: require("@/assets/movie/list/受益人.jpg"),
        //   wants: 123,
        //   playtime: "2021 - 09 - 07",
        //   hot: 65,
        // },
        // {
        //   name: "哥斯拉",
        //   imgAddress: require("@/assets/movie/list/哥斯拉.jpg"),
        //   wants: 5123,
        //   playtime: "2021 - 10 - 10",
        //   hot: 88,
        // },
      ],
      topList: [],
    };
  },
  mounted() {
    this.getCarouselPicture();
    this.getMovieList();
    this.getTopList();
  },
  methods: {
    toDetail(item) {
      localStorage.setItem("fid",item.id);
      this.$router.push("/movie_detail?fid=" + item.id);
    },
    // 获取轮播图片
    getCarouselPicture() {
      Carousel().then((res) => {
        // console.log(res);
        this.carouselPicture = res.data;
      });
    },
    // 获取电影列表
    getMovieList() {
      MovieList().then((res) => {
        res.msg = "filmList";
        for (var i = 0; i < res.data.length; i++) {
          res.data[i].releaseTime = this.formatDate(res.data[i].releaseTime);
        }
        console.log(res);
        this.movieList = res.data;
      });
    },
    // 获取top电影列表
    getTopList() {
      TopMovieList().then((res) => {
        res.msg = "topList";
        for (var i = 0; i < res.data.length; i++) {
          res.data[i].releaseTime = this.formatDate(res.data[i].releaseTime);
        }
        console.log(res);
        this.topList = res.data;
      });
    },
    // 日期格式化
    formatDate(dateint) {
      var date = new Date(parseInt(dateint));
      var str =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      return str;
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 1440px;
  height: 2000px;
  margin: 0 auto;
  padding: 0;
  .content {
    .carousel {
      width: 1440px;
      margin: 0 auto;
      background-color: lightgray;
      img {
        width: 1440px;
        cursor: pointer;
      }
    }
    .movieList {
      width: 850px;
      height: auto;
      display: flex;
      flex-flow: row wrap;
      align-content: space-between;
      // justify-content: space-around;
      padding: 30px 25px;
      float: left;
      p {
        width: 850px;
        margin: 25px 16px;
      }
      .movie {
        width: 200px;
        height: 322px;
        position: relative;
        margin: 0 6.25px;
        margin-bottom: 15px;

        .movie_up {
          width: 200px;
          height: 255px;
          border: 1px gray solid;
          border-bottom: none;
          position: relative;
          overflow: hidden;
          img {
            width: 200px;
            height: 255px;
          }
          .movie_name {
            width: 202px;
            height: 35px;
            line-height: 35px;
            position: absolute;
            background-color: black;
            opacity: 75%;
            bottom: -35px;
            left: -1px;
            color: white;
            transition: 0.5s;
          }
        }
        .movie_up:hover {
          cursor: pointer;
          .movie_name {
            bottom: 0;
          }
        }
        .wants {
          width: 200px;
          height: 30px;
          line-height: 30px;
          background-color: lightgray;
          color: orange;
          border: 1px gray solid;
          border-top: none;
          font-weight: bold;
        }
        .playTime {
          padding-top: 10px;
          text-align: center;
          font-size: 14px;
          color: gray;
        }
      }
    }
    .top10 {
      width: 440px;
      height: auto;
      float: left;
      padding: 50px;
      ul {
        height: auto;
        list-style: none;
        padding-top: 40px;
        li {
          div {
            cursor: pointer;
          }
          .first {
            width: 438px;
            height: 230px;
            border: 1px lightgray solid;
            display: flex;
            flex-flow: column wrap;
            justify-content: center;
            align-content: start;
            margin: 30px 0;
            img {
              width: 170px;
              height: 230px;
              float: left;
              margin-right: 10px;
              cursor: pointer;
            }
            .name {
              font-size: 20px;
              margin: 5px 0;
            }
            .playTime {
              font-size: 16px;
              margin: 5px 0;
            }
            .hot {
              font-size: 12px;
              margin-top: 20px;
              color: orange;
            }
          }
          .second {
            width: 160px;
            height: 260px;
            border: 1px lightgray solid;
            float: left;
            margin-left: 50px;
            img {
              width: 160px;
              height: 200px;
              cursor: pointer;
            }
            .name {
              font-size: 18px;
              margin-left: 10px;
            }
            .hot {
              font-size: 12px;
              margin-top: 7px;
              margin-left: 10px;
              color: orange;
            }
          }
          .tired {
            width: 160px;
            height: 260px;
            border: 1px lightgray solid;
            float: left;
            margin-left: 12px;
            margin-bottom: 20px;
            img {
              width: 160px;
              height: 200px;
              cursor: pointer;
            }
            .name {
              font-size: 18px;
              margin-left: 10px;
            }
            .hot {
              font-size: 12px;
              margin-top: 7px;
              margin-left: 10px;
              color: orange;
            }
          }
          .other {
            height: 30px;
            margin-bottom: 15px;
            clear: both;
            .num {
              color: gray;
            }
            .name {
              margin-left: 20px;
            }
            .hot {
              float: right;
              font-size: 12px;
              color: orange;
            }
          }
        }
      }
    }
  }
}
</style>